<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <head>
        <meta charset="utf-8">
        <style>
            div {
                text-align: center;
                background-color: green;
            }

            div>a {
                width: 200px;
                height: 50px;
                /* background-color: orange; */
                display: inline-block;
                /* 把a 行内元素转换为行内块元素  可以有间距*/
                text-align: center;
                /* 文字水平居中 */
                line-height: 50px;
                /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */
                color: #fff;
                font-size: 22px;
                /* 取消下划线 文本装饰 */
                text-decoration: none;
                border: 1px solid white;
            }

            div>a:hover {
                /* 鼠标经过 给我们的链接添加背景图片*/
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="nav">
            <a href="#">专区说明</a>
            <a href="#">申请资格</a>
            <a href="#">兑换奖励</a>
            <a href="#">
                <div>下载游戏</div>
            </a>
        </div>
    </body>
</body>

</html>